<template>
  <div class="container">
    <!-- <my-video :sources="video.sources" :options="video.options"></my-video> -->
    <div ref="tag" class="scroll-wrap">
      <div class="goods" :class="{active:animate}" v-for="(item, i) in data" :key="i"  @click="goSpecial(item.name)">
        <!-- <span>{{ item.name }}</span>
        <span>{{ item.coupon }}</span> -->
        <img :src="item.imgLink" alt="">
      </div>
    </div>
  </div>
</template>
<script>
// import myVideo from "vue-video";
export default {
  components: {},
  props: { data: Array, time: String },
  data() {
    return {
      animate: false,
      intNum: undefined
    };
  },
  mounted() { this.ScrollUp(); },
  methods: {
    ScrollUp() {
      this.intNum = setInterval(() => {
        this.animate = true; // 向上滚动的时候需要添加css3过渡动画
        setTimeout(() => {
          this.data.push(this.data[0]); // 将数组的第一个元素添加到数组的
          this.data.shift(); //删除数组的第一个元素
          this.animate = false;
        }, 500);
      }, this.time);
    },
    goSpecial(val){ jump2special(val);}
  },
};
</script>
<style lang="less" scoped>
.container {
  position: relative;
  font-size: 0.32rem;
}
p {
  margin: 0;
  background: #fff;
}
.goods{
  margin:0.1rem 0;
  background:transparent;
}
.goods img{
  width:70%;
}
.scroll-wrap {
  width: 2rem;
  position: absolute;
  height: 70px;
  line-height: 30px;
  overflow: hidden;
  span {
    background: #fff;
  }
}
.active {
  transform: translateY(-30px);
  transition: all 0.5s;
}
</style>


